<template>
	<view class="container">
		<view class="title">
			<u-icon name="star-fill" color="#5e84bc" size="200"></u-icon>
		</view>
		<view class="input_box">
			<view>
				<u-input v-model="changguan" placeholder="请选择场馆" @click="selectChangguan" type="select"
					placeholder-style="padding-left: 10rpx;" style="background-color: #FFFFFF;">
				</u-input>
				<u-select v-model="changShow" mode="single-column" placeholder="选择场馆" :list="changList"
					@confirm="confirm" style="background-color: #FFFFFF;">
					<text>name</text>
				</u-select>
			</view>
			<view>
				<u-input v-model="zuowei" placeholder="请选择要设置的常用座位" @click="selectZuowei" type="select"
					placeholder-style="padding-left: 10rpx;" style="background-color: #FFFFFF;">
				</u-input>
				<u-select v-model="zuoShow" mode="single-column" placeholder="选择场馆" :list="zuoList" @confirm="confirm"
					style="background-color: #FFFFFF;">
					<text>name</text>
				</u-select>
			</view>
		</view>

		<u-button style="background-color: #6184bd; margin: 100rpx 0 30rpx 0;color: #FFFFFF;">下一步</u-button>

		<view class="foot">
			<text>
				设置你的常用座位号，为今后更方便的来选择你喜欢的座位。
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				zuowei: '',
				zuoShow: false,
				changguan: '',
				changShow: false,
				zuoList: [{
						value: '1',
						label: '1'
					},
					{
						value: '2',
						label: '2'
					}
				],
				changList: [{
					value: '1',
					label: "阳关图书馆-F"
				}, {
					value: '3',
					label: "阳关图书馆-M"
				}, {
					value: '2',
					label: '阳关图书馆-A'
				}]
			};
		},

		// 
		methods: {
			selectZuowei() {
				this.zuoShow = true
			},
			selectChangguan() {
				this.changShow = true
			}
		}
	}
</script>

<style lang="scss">
	.container {
		background-color: #dee4f1;
		height: 100%;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		padding: 0 100rpx;


		.title {
			height: 400rpx;
			width: 100%;
			// background-color: red;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.input_box {
			width: 100%;
			height: 180rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;

			view {
				width: 100%;
			}

		}

		.foot {
			width: 100%;
			display: flex;
			justify-content: center;
			color: #75aae6;
		}
	}
</style>
